<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>

<style>
h2.listview {
	margin:0;
	padding:0;
	color: red;
}

.myspan{
    max-width: 200px;
    display: block;
    overflow: hidden;
    word-wrap: break-word;
}
.mhr {
	display: block; 
	height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 0em 0; padding: 0; 
}

</style>
</head> 
<body>

<?php require("check_login_m.php"); ?>
<?php require("user_settings.php"); ?>

<?php
	$profile = getUser($_SESSION['id_m']);
	$cname = $profile['cname'];
?>




<div data-role="page" data-theme="a" id="demo-page" class="my-page" data-url="demo-page">

	<div data-role="popup" id="popupMenu" data-theme="a">
    	<div data-role="popup" id="popupInfo" data-theme="a" class="ui-corner-all" style="width:300px;">
            <div style="padding:0px 10px;">
                <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
                <div id='popupContent'>
				</div>
            </div>
    	</div>
	</div>

    <!--<div data-role="header" data-position="fixed" data-tap-toggle="false">-->
    <div data-role="header">
        <h1> 
		<?php echo "$cname 特約"; ?>
		</h1>
		<a href=logout_m.php> 登出 </a>
    <div data-role="navbar">
        <ul>
          <li><a href="#" class="ui-btn-active">特約訊息</a></li>
          <li><a href="#">管理員的話</a></li>
          <li><a href="#">系統公佈</a></li>
        </ul>
    </div>

    </div><!-- /header -->

    <input type="search" name="search" id="search-basic" value="" onchange="reloadTable(this)"/>
    <div role="main" class="ui-content">
        <ul id='listview' data-role="listview" data-inset="true">
        </ul>
    </div><!-- /content -->
</div>




<script lang=javascript>
<?php
	echo "var json_content_text='". getOffer($_SESSION['id_m'])."'";
?>

function mapPlace(n,a) {
	//parent.location.href = "http://www.google.com/?#q="+n+"%20"+a;
	window.open("http://www.google.com/?#q="+n+"%20"+a);
}
function updatePopup(i) {
	var obj = JSON.parse(json_content_text);
	var popup = document.getElementById("popupContent");
	var searchURL = "<a href=# onclick=mapPlace(\""+obj[i]["廠商名稱"] +"\",\""+obj[i]["地址"]+"\")>搜尋</a>";
	popup.innerHTML = "<img src='a.png' width=30px style='vertical-align: middle;'><span style='margin: 0 0 0 10px;'>" + obj[i]["廠商名稱"] + "</span><HR class='mhr'>" +
					"<p>分類: " + obj[i]["分類"] + "</p>"+
					"<p>地址: " + obj[i]["地址"] + "</p>"+
					"<p>電話: " + obj[i]["電話"] + "</p>"+
					"<p>優惠: " + obj[i]["優惠"] + "</p>"+
					searchURL;

		
}
function loadTable(x) {
	if(json_content_text.length ==0) {
		var status = document.getElementById("tableStatus");
		status.innerHTML = "<H2> 目前沒有任何特約資訊喔！ </H2>";
		return;
	}
	var obj = JSON.parse(json_content_text);
	var num = 1;
	var total="";
	var msg="";
	$('#listview').empty().listview('refresh');
	for(i=0;i<obj.length;i++) {
		//var Tr = document.getElementById("mytable").insertRow(num);
		//Td = Tr.insertCell(Tr.cells.length);
		//Td.innerHTML=obj[i]["廠商名稱"];
		//Td = Tr.insertCell(Tr.cells.length);
		//Td.innerHTML=obj[i]["分類"];
		//Td = Tr.insertCell(Tr.cells.length);
		//Td.innerHTML=obj[i]["地址"];
		//Td = Tr.insertCell(Tr.cells.length);
		//Td.innerHTML=obj[i]["電話"];
		//Td = Tr.insertCell(Tr.cells.length);
		//Td.innerHTML=obj[i]["優惠"];
		//unhighlight();
		
		num++;
		msg = "";

		msg += "<li><a href='#popupInfo' data-rel='popup' data-position-to='window' transition='flip' onclick=updatePopup("+i+")>";
		msg += "<img src='a.png' class='ui-li-thumb'>";
		msg += "<font color=red>["+obj[i]["分類"]+"]"+obj[i]["廠商名稱"]+"</font>";
		msg += "<p style='text-height: 1em;'>"+ obj[i]["地址"] + "<BR>";
		msg += obj[i]["優惠"] + "<BR>";
		msg += obj[i]["電話"]+"</p>";
		msg += "</a></li>";
		if((x!=null) && (msg.toLowerCase().lastIndexOf(x.value.toLowerCase()) == -1))
			continue;
		total += msg;
	
		//alert('abc');
		//if(i == (obj.length-1))
		//	$('#listview').append("</a></li>").listview('refresh');
		//else
		//	$('#listview').append("</a></li>");
	}
		//if( obj.length !=0)
			$('#listview').append(total).listview('refresh');
		//else
		//	$('#listview').append(msg);
	
}
function example4() {
	loadTable(null);
}
function reloadTable(x) {
	loadTable(x);
}
window.onload = function() 
{ 
	example4(); 
}




</script>
</body>
</html>
